<template>
  <a-modal v-model='visible' title='导入银行流水' :footer='null' @cancel='close' :width='610'>
    <f-form ref='form'>
      <f-form-item label='选择银行' ref='bank' type='select' name='bankId' :value.sync='formItem.bankId' :data='api.bank.list' valueKey='bankId' label-key='bankName' :required='true' />
      <f-form-item type='other'>
        <a-upload-dragger
          :action='getUrl'
          :headers='accessToken'
          :accept='accept'
          :data='data'
          :beforeUpload='beforeUpload'
          @change='handleChange'
          :showUploadList='false'
          ref='up'
          class='upload'
        >
          <p class='ant-upload-drag-icon' style='margin-top: 10px'>
            <a-icon type='inbox' />
          </p>
          <p class='ant-upload-text' style='width: 530px'>
            选择银行流水文件
          </p>
          <p class='ant-upload-hint'>
            {{ tip }}
          </p>
        </a-upload-dragger>
      </f-form-item>
    </f-form>
  </a-modal>
</template>

<script>
import api from "../js/api"
import Vue from "vue"

export default {
  name: "UploadFinanceModal",
  model: {
    prop: "value",
    event: "change.value"
  },
  props: {
    width: {
      type: String,
      default: "250px"
    },
    action: {
      type: String,
      default: ""
    },
    fileSize: {
      default: 204800
    },
    value: {
      type: [String, Array],
      default: ""
    },
    tip: {
      type: String,
      default: ""
    },
    accept: {
      type: [String],
      default: ".xls,.xlsx"
    },
    otherParams: {}
  },
  computed: {
    fileMaxSize: {
      get: function() {
        if (this.fileSize >= 1024 && this.fileSize < 1048576) {
          this.sizeUnit = "M"
          return Number(this.fileSize / 1024).toFixed(2)
        }
        if (this.fileSize >= 1048576) {
          this.sizeUnit = "G"
          return Number(this.fileSize / 1024 / 1024).toFixed(2)
        } else {
          this.sizeUnit = "KB"
          return this.fileSize
        }
      }
    }
  },
  watch: {},
  data() {
    return {
      refs: this.$refs,
      api: Object.assign(api, this.api),
      accessToken: {},
      visible: false,
      url: "",
      sizeUnit: "KB",
      data: {},
      fileId: "",
      removeIds: [],
      loading: false,
      viewImage: false,
      btnText: "选择文件",
      formItem: {
        bankId: undefined
      }
    }
  },
  methods: {
    getUrl() {
      let env = process.env.NODE_ENV
      if (env == "development") {
        return "/base/" + this.action
      } else {
        return process.env.VUE_APP_API_BASE_URL + "/" + this.action
      }
    },
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
      this.$refs.form.getForm().resetFields()
    },
    supplierChange(value) {
      this.formItem.supplierId = value
    },
    init() {
      const token = Vue.ls.get("Access-Token")
      this.accessToken = {
        Authorization: token
      }
    },
    handleFormatError(file) {
      this.loading = false
      this.$notification.warning({
        title: "不支持的文件格式",
        desc: "所选文件‘ " + file.name + " ’格式不正确, 请选择" + this.accept + "格式文件"
      })
    },
    handleMaxSize(file) {
      this.loading = false
      this.$notification.warning({
        title: "文件大小过大",
        desc: "所选文件‘ " + file.name + " ’大小过大,不得超过" + this.fileMaxSize + this.sizeUnit
      })
    },
    beforeUpload() {
      let bankId = this.formItem.bankId
      if (!bankId) {
        this.$message.error("请选择导入银行")
        return false
      }
      this.data = this.formItem
      this.loading = true
      this.btnText = "上传中..."
      this.$emit("on-before")
      return true
    },
    handleError(error, file, fileList) {
      this.loading = false
      this.$message.error(error.toString())
    },

    handleChange({ file, fileList, event }) {
      if (file.status == "uploading") {
        this.$message.destroy()
        this.$message.loading("正在导入数据...", 50000)
      }
      if (file.status == "done") {
        this.$emit("change")
        this.$message.destroy()
      }
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang='less'>
.upload {
  display: inline-block;
  margin-left: 10px;

  .ant-upload-hint {
    heigh: 300px;
    width: 450px
  }
}
</style>

